<template>
    <div style="height:100%;overflow-y:auto">
    <Row>
        <Col span="16">
        <Row style="text-align: center;">
            <h1>公积金数据</h1>
        </Row>
        <Card>
            <Form :label-width="100" inline>
                <Collapse v-model="value1">
                    <Panel name="1">公积金账户基本信息
                        <div slot="content">
                            <FormItem label="姓名" prop="">
                                <Input v-model="account.name" readonly></Input>
                            </FormItem>
                            <FormItem label="性别" prop="">
                                <Input v-model="account.sex" readonly></Input>
                            </FormItem>
                            <FormItem label="出身日期" prop="">
                                <Input v-model="account.birthday" readonly></Input>
                            </FormItem>
                            <FormItem label="婚姻状态" prop="">
                                <Input v-model="account.marriage" readonly></Input>
                            </FormItem>
                            <FormItem label="联名卡号" prop="">
                                <Input v-model="account.card" readonly></Input>
                            </FormItem>
                            <FormItem label="客户号" prop="">
                                <Input v-model="account.customerId" readonly></Input>
                            </FormItem>
                            <FormItem label="手机号码" prop="">
                                <Input v-model="account.phone" readonly></Input>
                            </FormItem>
                            <FormItem label="公司" prop="">
                                <Input v-model="account.company" readonly></Input>
                            </FormItem>
                            <FormItem label="缴存基数" prop="">
                                <Input v-model="account.depositBase" readonly></Input>
                            </FormItem>
                            <FormItem label="公司缴存基数" prop="">
                                <Input value=" "></Input>
                            </FormItem>
                            <FormItem label="月缴额" prop="">
                                <Input v-model="account.depositAmount" readonly></Input>
                            </FormItem>

                            <FormItem label="房补月缴额" prop="">
                                <Input v-model="account.fbDepositAmount" readonly></Input>
                            </FormItem>
                            <FormItem label="房补余额" prop="">
                                <Input v-model="account.fbBalance" readonly></Input>
                            </FormItem>
                            <FormItem label="余额" prop="">
                                <Input v-model="account.balance" readonly></Input>
                            </FormItem>
                            <FormItem label="个人月缴额" prop="">
                                <Input v-model="account.personDepositAmount" readonly></Input>
                            </FormItem>
                            <FormItem label="公司月缴额" prop="">
                                <Input v-model="account.companyDepositAmount" readonly></Input>
                            </FormItem>
                            <FormItem label="个人缴存比例" prop="">
                                <Input v-model="account.personRate" readonly></Input>
                            </FormItem>
                            </FormItem>
                            <FormItem label="公司缴存比例" prop="">
                                <Input v-model="account.companyRate" readonly></Input>
                            </FormItem>
                            <FormItem label="状态" prop="">
                                <Input v-model="account.status"></Input>
                            </FormItem>
                            <FormItem label="最后入账时间" prop="">
                                <Input v-model="account.recordDate" readonly></Input>
                            </FormItem>
                            <FormItem label="缴存比例(合)" prop="">
                                <Input v-model="account.depositRate" readonly></Input>
                            </FormItem>
                            <FormItem label="开始缴存时间" prop="">
                                <Input v-model="account.startDate" readonly></Input>
                            </FormItem>
                            <FormItem label="住址" prop="">
                                <Input v-model="account.address" readonly></Input>
                            </FormItem>
                            <FormItem label="最近连续缴存" prop="">
                                <Input v-model="account.contLastTimes" readonly></Input>
                            </FormItem>
                            <FormItem label="最近连续缴存(含补缴)" prop="">
                                <Input v-model="account.backContLastTimes" readonly></Input>
                            </FormItem>
                            <FormItem label="连续缴存最多次数" prop="">
                                <Input v-model="account.contMaxTimes" readonly></Input>
                            </FormItem>
                            <FormItem label="连续缴存最多次数(含补缴)" prop="">
                                <Input v-model="account.backContMaxTimes" readonly></Input>
                            </FormItem>
                            <FormItem label="总共缴存次数" prop="">
                                <Input v-model="account.sumTimes" readonly></Input>
                            </FormItem>
                            <FormItem label="总共缴存次数(含补缴)" prop="">
                                <Input v-model="account.backSumTimes" readonly></Input>
                            </FormItem>
                            <FormItem label="近6个月断缴月份数" prop="">
                                <Input v-model="account.last6monthsPayOff" readonly></Input>
                            </FormItem>
                            <FormItem label="近6个月断缴月份数(含补缴)" prop="">
                                <Input v-model="account.last6monthsBackPayOff" readonly></Input>
                            </FormItem>
                            <FormItem label="account.last6monthsBackPayOff" prop="">
                                <Input v-model="account.last24monthsSumTimes" readonly></Input>
                            </FormItem>
                            <FormItem label="近24个月总共缴存次数(含补缴)" prop="">
                                <Input v-model="account.last24monthsBackSumTimes" readonly></Input>
                            </FormItem>
                            <FormItem label="近24个月缴存公司个数" prop="">
                                <Input v-model="account.last24monthsCompanyQuantity" readonly></Input>
                            </FormItem>
                            <FormItem label="近12个月是否有提取" prop="">
                                <Input v-model="account.last12monthsHasExtract" readonly></Input>
                            </FormItem>
                        </div>
                    </Panel>
                    <Panel name="2">缴存记录
                        <div slot="content">
                            <Table style="margin-left:15px;margin-top:5px;" :columns="itemDetailtwo" :data="itemDetail"></Table>
                        </div>
                    </Panel>
                    <Panel name="3">公积金贷款记录
                        <div slot="content">
                            <FormItem label="姓名" prop="">
                                <Input v-model="account.name" readonly></Input>
                            </FormItem>
                            <FormItem label="身份证" prop="">
                                <Input v-model="account.ID" readonly></Input>
                            </FormItem>
                            <FormItem label="合同号" prop="">
                                <Input v-model="account.conNo" readonly></Input>
                            </FormItem>
                            <FormItem label="状态" prop="">
                                <Input v-model="account.status" readonly></Input>
                            </FormItem>
                            <FormItem label="贷款金额" prop="">
                                <Input v-model="account.credit" readonly></Input>
                            </FormItem>
                            <FormItem label="期数" prop="">
                                <Input v-model="account.period" readonly></Input>
                            </FormItem>
                            <FormItem label="年利率" prop="">
                                <Input v-model="account.rate" readonly></Input>
                            </FormItem>
                            <FormItem label="罚息利率" prop="">
                                <Input v-model="account.warningRate" readonly></Input>
                            </FormItem>
                            <FormItem label="剩余贷款金额" prop="">
                                <Input v-model="account.balance" readonly></Input>
                            </FormItem>
                            <FormItem label="还款方式" prop="">
                                <Input v-model="account.fund" readonly></Input>
                            </FormItem>
                            <FormItem label="还款日" prop="">
                                <Input v-model="account.fundDate" readonly></Input>
                            </FormItem>
                            <FormItem label="委托银行" prop="">
                                <Input v-model="account.bank" readonly></Input>
                            </FormItem>
                            <FormItem label="account.bank" prop="">
                                <Input v-model="account.phone" readonly></Input>
                            </FormItem>
                            <FormItem label="phone" prop="">
                                <Input v-model="account.address" readonly></Input>
                            </FormItem>
                            <FormItem label="贷款开始日期" prop="">
                                <Input v-model="account.startDate" readonly></Input>
                            </FormItem>
                            <FormItem label="贷款结束日期" prop="">
                                <Input v-model="account.endDate" readonly></Input>
                            </FormItem>
                            <FormItem label="最后入账时间" prop="">
                                <Input v-model="account.recordDate" readonly></Input>
                            </FormItem>
                            <FormItem label="本月还款额" prop="">
                                <Input v-model="account.dueAmount" readonly></Input>
                            </FormItem>
                            <FormItem label="已还本金" prop="">
                                <Input v-model="account.payPrinciple" readonly></Input>
                            </FormItem>
                            <FormItem label="已还利息" prop="">
                                <Input v-model="account.payInterest" readonly></Input>
                            </FormItem>
                            <FormItem label="当前逾期金额" prop="">
                                <Input v-model="account.pastDue" readonly></Input>
                            </FormItem>
                            <FormItem label="当前逾期本金" prop="">
                                <Input v-model="account.pastPrinciple" readonly></Input>
                            </FormItem>
                            <FormItem label="当前逾期本息" prop="">
                                <Input v-model="account.pastInterest" readonly></Input>
                            </FormItem>
                            <FormItem label="当前逾期期数" prop="">
                                <Input v-model="account.pastPeriod" readonly></Input>
                            </FormItem>
                            <FormItem label="历史逾期期数" prop="">
                                <Input v-model="account.historyPastPeriod" readonly></Input>
                            </FormItem>
                            <FormItem label="历史逾期金额" prop="">
                                <Input v-model="account.historyPastAmount" readonly></Input>
                            </FormItem>
                            <FormItem label="担保方式" prop="">
                                <Input v-model="account.assureStyle" readonly></Input>
                            </FormItem>
                            <FormItem label="购房类型" prop="">
                                <Input v-model="account.houseType" readonly></Input>
                            </FormItem>
                            <FormItem label="扣款账号" prop="">
                                <Input v-model="account.debitAccount" readonly></Input>
                            </FormItem>
                            <FormItem label="剩余期数" prop="">
                                <Input v-model="account.leftPeriod" readonly></Input>
                            </FormItem>
                        </div>
                    </Panel>
                    <Panel name="4">公积金贷款明细
                        <div slot="content">
                            <Table style="margin-left:5px;margin-top:5px;" :columns="loanItemDetailtwo" :data="loanItemDetail"></Table>
                        </div>
                    </Panel>
                    <Panel name="5">历年公积金缴存情况
                        <div slot="content">
                            <Table style="margin-left:5px;margin-top:5px;" :columns="companyDatatwo" :data="companyData"></Table>
                        </div>
                    </Panel>
                </Collapse>
            </Form>
        </Card>
        </Col>
    </Row>
    </div>
</template>

<script>
import Viewer from '../../components/ykd-viewer.vue'
export default {
  components: {
    Viewer
  },
  data () {
    return {
      value1: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30],
      account: {},
      baseUrl: this.$appContext.marvels_core_approve,
      $ajax: null,
      loanId: null,
      itemDetail: [],
      itemDetailtwo: [
        {
          title: '缴存次序',
          type: 'index',
          width: 70,
          align: 'center'
        },
        {
          align: 'center',
          title: '缴存类型',
          key: 'gjjType'
        },
        {
          align: 'center',
          title: '发生额',
          key: 'amount'
        },
        {
          align: 'center',
          title: '余额',
          key: 'balance'
        },
        {
          align: 'center',
          title: '缴存月份',
          key: 'recordMonth'
        },
        {
          align: 'center',
          title: '公司',
          key: 'company'
        },
        {
          align: 'center',
          title: '发生日期',
          key: 'recordDate'
        },
        {
          align: 'center',
          title: '发生日期',
          key: 'contFlag'
        }
      ],
      loanItemDetail: [],
      loanItemDetailtwo: [
        {
          title: '发生日期',
          key: 'startTime'
        },
        {
          title: '类型',
          key: 'depositType'
        },
        {
          title: '缴存月份',
          key: 'recordMonth'
        },
        {
          title: '还款本金',
          key: 'principle'
        },
        {
          title: '利息',
          key: 'interest'
        },
        {
          title: '还款本息',
          key: 'base'
        },
        {
          title: '贷款余额',
          key: 'balance'
        },
        {
          title: '实际扣款日期',
          key: 'billDate'
        },
        {
          title: '罚息',
          key: 'warningInterest'
        },
        {
          title: '应还日期',
          key: 'dueDate'
        },
        {
          title: '期数',
          key: 'period'
        }
      ],
      companyData: [],
      companyDatatwo: [
        {
          title: '公司名',
          key: 'company'
        },
        {
          title: '最近连续缴存',
          key: 'contLastTimes'
        },
        {
          title: '最近连续缴存(含补缴)',
          key: 'backContLastTimes'
        },
        {
          title: '连续缴存最多次数',
          key: 'contMaxTimes'
        },
        {
          title: '连续缴存最多次数(含补缴)',
          key: 'backContMaxTimes'
        },
        {
          title: '总共缴存次数',
          key: 'sumTimes'
        },
        {
          title: '总共缴存次数(含补缴)',
          key: 'backSumTimes'
        },
        {
          title: '此公司开始缴纳时间',
          key: 'startMonth'
        },
        {
          title: '次公示结束缴纳时间',
          key: 'endMonth'
        }
      ]

    }
  },
  methods: {
    initpage: function () {
      this.loadCredit()
    },
    // 征信报告
    loadCredit: function () {
      var vm = this
      //  var loanId = this.$route.query.loanId;
      //  var serviceType =this.$route.query.serviceType;
      // //  debugger
      //  var reqNo = this.$route.query.reqNo;
      //  console.log(reqNo,serviceType,loanId);
      var params = {}
      params.loanId = this.$route.query.loanId
      params.serviceType = this.$route.query.serviceType
      params.reqNo = this.$route.query.reqNo
      this.$ajax.get(this.baseUrl + '/approve/process/credit_reporting/service/getCreditDetail', { params: params }).then(re => {
        var data = re.data
        // console.log(data)
        vm.account = data.data.data.account || {}
        vm.itemDetail = data.data.data.itemDetail || []
        vm.loanItemDetail = data.data.data.loanItemDetail || []
        vm.companyData = data.data.data.companyData || []
      })
        .catch(er => { })
    }
  },
  created () {
    this.$ajax = this.$util.ajax()
    this.initpage()
    document.getElementsByTagName('title')[0].innerText = '51公积金征信数据-核心管理系统'
  },
  // watch: {
  //   //点击tab页签，加载数据，只加载一次
  //   "taskParams.creditDataPyServiceImpl_detail"(v) {
  //     debugger;
  //     if (v) {
  //       this.initpage();
  //     }
  //   }
  // },
  props: {
    taskParams: Object
  }
}
</script>

<style lang="less">
.ivu-form-item {
  margin-bottom: 1px;
}
</style>
